<template>
  <div class="footer">
    <div class="footer-code" v-if="hasCode">
      <div class="code-wrapper">
        <img class="footer-code-img" src="~@/assets/images/zuozancode.jpeg">
        <div class="footer-code-tips">微信扫一扫，立即体验"左赞管家" 小程序 </div>
      </div>
      <div class="code-wrapper">
        <img class="footer-code-img" src="~@/assets/images/zuozanguanjiacode.jpeg">
        <div class="footer-code-tips">微信扫一扫，立即体验 "左赞管家" 小程序 </div>
      </div>
    </div>
    <div class="footer-main">
      <img class="footer-main-logo" src="~@/assets/images/logo.png">
      <div class="footer-main-slogan">做营销，用左赞</div>
      <div class="footer-main-mobile">客服电话：13651858619（工作日：9:00~19:00）</div>
      <div class="footer-main-mail">商务合作：luffy.lei@puman.com</div>
      <div class="footer-main-record">©2019 左赞 沪ICP备18037168号-2</div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'common-footer',
  props: {
    hasCode: {
      type: Boolean,
      default: true
    },
  },
  data() {
    return {
    }
  }
}
</script>

<style scoped lang="scss">
.footer {
  &-code {
    padding: 64px 0;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    flex-wrap: nowrap;
    .code-wrapper {
      text-align: center;
      margin: 0 20px;
    }
    &-img {
      width: 141px;
      margin-bottom: 22px;
    }
    &-tips {
      font-size: 12px;
      color: #2F2F2F;
    }
  }
  &-main {
    background: #2f2f2f;
    padding-top: 32px;
    text-align: center;
    color: #EFEFEF;
    &-logo {
      width: 56px;
    }
    &-slogan {
      font-size: 15px;
      margin: 16px 0 20px;
    }
    &-mobile {
      font-size: 12px;
      margin-bottom: 6px;
    }
    &-mail {
      font-size: 12px;
      margin-bottom: 10px;
    }
    &-record {
      width: 100%;
      background: #373737;
      height: 32px;
      line-height: 32px;
      font-size: 12px;
      color: #C3C3C3;
    }
  }
}
</style>
